<template>
	<view class="main">
		<swiper class="swiper" indicator-dots>
			<swiper-item class="item" v-for="(item, index) in info.imgs" :key="index">
				<image class="img" :src="item" mode="aspectFill" @tap="imgPreview(item)" />
			</swiper-item>
		</swiper>

		<view class="text-form-wrapper">
			<view class="row text">
				<text class="ctx" decode>{{ info.text }}</text>
			</view>
			<view class="row">
				<view class="label">
					<image class="icon" src="/static/定位.png"></image>
				</view>
				<view class="ctx">{{ info.city }}</view>
			</view>
			<view class="row">
				<view class="label">
					<image class="icon" src="/static/电话.png"></image>
				</view>
				<view v-if="contactLock && info.unlock_cost > 0" class="ctx click" @tap="unlock">
					消耗<text>{{ info.unlock_cost }}金币</text>解锁
				</view>
				<view v-else class="ctx click" @tap="copy">{{ info.contact.indexOf('http')!=-1 ? '查看联系方式':  info.contact }}</view>
			</view>
		</view>

		<view class="bottom-wrap">
			本站不确保任何信息的真实性 交友需谨慎 谨防诈骗 <text @tap="report">举报</text>
		</view>
	</view>
</template>

<script>
	import {
		http
	} from '@/lib/js/request';
	import {
		goPage,
		delay,
		copy
	} from '@/lib/js/utils';
	import {
		toast
	} from '@/lib/js/dailog';
	export default {
		data() {
			return {
				id: this.$route.query.id,
				info: {},
				contactLock: true
			};
		},
		onLoad() {
			this.getPost();
		},
		methods: {
			async report() {
				await delay(500)
				toast('举报成功')
			},
			imgPreview(src) {
				uni.previewImage({
					urls: [src]
				});
			},
			async getPost() {
				const res = await http('/post/find', {
					id: this.id
				});
				this.info = res.data;
			},
			async unlock() {
				const res = await http('/post/unlock', {
					id: this.id
				});
				if (!res.data) {
					toast('金币不足');
					await delay(1000);
					goPage(`/pages/mine/getcoin`);
				} else {
					toast('解锁成功');
					this.contactLock = false;
				}
			},
			copy() {
				if (this.info.contact.indexOf('http') != -1) {
					this.imgPreview(this.info.contact)
				} else {
					copy(this.info.contact);
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.main {
		min-height: 100vh;
		display: flex;
		flex-direction: column;

		.swiper {
			height: 525rpx;
		}

		.text-form-wrapper {
			padding: 40rpx;
			flex: 1;

			.row {
				margin: 20rpx;
				display: flex;
				align-items: center;

				&.title {
					font-size: 30rpx;
					font-weight: 700;
				}

				&.text {
					margin-bottom: 60rpx;
					font-size: 32rpx;
					line-height: 1.7;
				}

				.label {
					margin-right: 20rpx;

					.icon {
						width: 40rpx;
						height: 40rpx;
					}
				}

				.ctx {
					&.click {
						color: $color-1;
						text-decoration: underline;

						text {
							margin: 3rpx;
							font-weight: 700;
						}
					}
				}
			}
		}

		.bottom-wrap {
			color: $color-3;
			font-size: 22rpx;
			text-align: center;
			padding: 40rpx;

			text {
				color: $color-1;
				margin: 10rpx;
			}
		}
	}
</style>
